<template>
	<view class="page">
		<u-navbar title="跑步详情" border @leftClick="$utils.back()" placeholder />
		<view class="body">
			<z-paging ref="paging" style="height: 100%;" :fixed="false" v-model="data" @query="query"
				:default-page-no="1" :default-page-size="10">
				<template v-if="loading">
					<view>
						<view v-for="item in 5" :key="index" class=" Skeleton mt10" style="height: 30rpx;" />
						<view class="activeContent mt20" style="border: none;">
							<view>
								<album :loading='loading' />
							</view>
						</view>
						<view  class=" Skeleton mt10" style="height: 30rpx;" />
					</view>
				</template>
				<template v-else>
					<view class="mt20">
						{{detail.title}}
					</view>
					<view class="mt20" style="position: relative;">
						<album :ref='`album0`' :imageList='detail.images'
							:video='detail.videos.map(imageItem=>imageItem.url)' :index='0' :playIndex='0' />
					</view>
					<view class="mt20 color_bbb flex">
						<view style="flex: 1;">
							{{detail.created_at | dateFormat}}
						</view>
						<view class="ml20" @click="Thumbsup">
							<u-icon color='#bbb' labelColor='#bbb' v-if="isThumbsuped" name='thumb-up-fill' size='40rpx'
								:label='detail.thumbsup_count>99?"99+":detail.thumbsup_count' labelSize='24rpx' />

							<u-icon color='#bbb' labelColor='#bbb' v-else name='thumb-up' size='40rpx'
								:label='detail.thumbsup_count>99?"99+":detail.thumbsup_count' labelSize='24rpx' />
						</view>
						<view class="ml20">
							<u-icon color='#bbb' labelColor='#bbb' name='chat' size='40rpx' label='评论' labelSize='24rpx'
								:label='detail.comments_count>99?"99+":detail.comments_count' />
						</view>
					</view>
					<view class="flex mt20">
						<u-icon color='#bbb' name='heart' size='40rpx' />
						<view class="flex ml20" style="flex-wrap: wrap;">
							<view v-for="(item,index) in user" :key="index" class="mr10 mb10">
								<u-avatar :src='item.avatar' size='40rpx' shape='square' />
							</view>
						</view>
					</view>
				</template>
				<template v-if="commentLoading">
					<view class="flex mt20" style="align-items: flex-start;"  v-for="item in 5" :key="index">
						<view style="width: 52rpx;height: 52rpx;" class="Skeleton"/>
						<view class="ml20" style="flex: 1;">
							<view v-for="item in 5" :key="index" class="Skeleton mt10" style="height: 30rpx;" />
						</view>
					</view>
				</template>
				<template v-else>
					<view class="flex mt20" style="align-items: flex-start;">
						<u-icon color='#bbb' name='chat' size='40rpx' />
						<view class=" ml20">
							<view class="Comments" v-for="(item,index) in data" :key="index">
								<view>
									<view>
										<u-avatar size="52rpx" :src="users[item.user_id].avatar"></u-avatar>
										<view style="margin-left: 20rpx;">
											<view style="margin-bottom: 20rpx; font-weight: bold;">
												{{users[item.user_id].nick_name}}
											</view>
											<view style="margin-bottom: 20rpx;">{{item.content}}</view>
											<view>
												<text>{{item.created_at | changeTime}}</text>
												<text @click="click(item)" style="margin-left: 20rpx;">回复</text>
												<text v-if='item.children_count&&!develop.includes(item.id)'
													style="margin-left: 20rpx;"
													@click="getReply(item.id)">展开{{item.children_count}}条回复</text>
											</view>
										</view>
									</view>
								</view>
								<view style="margin-left: 10vw;flex-direction: column;" v-if="develop.includes(item.id)">
									<view class="Comments" style="justify-content: space-between;"
										v-for="(item2,index2) in item.chidren" :key="index2">
										<view>
											<view>
												<u-avatar size="42rpx" :src="item2.user.avatar"></u-avatar>
												<view style="margin-left: 20rpx;">
													<view style="margin-bottom: 20rpx;" v-if='item2.reply_id'>
														{{item2.user.nick_name}}
													</view>
													<view style="margin-bottom: 20rpx;" v-else>{{item2.user.nick_name}}回复:
													</view>
													<view style="margin-bottom: 20rpx;">
														{{item2.content}}
														<text style="color: #3975C6;" v-if="item2.reply_id">
															@{{item2.reply.user.nick_name}}
														</text>
													</view>
													<view>
														<text>{{item2.created_at | changeTime}}</text>
														<text @click="click(item2)" style="margin-left: 20rpx;">回复</text>
													</view>
												</view>
											</view>
										</view>
									</view>
									<view @click="close(item.id)" style="align-self: flex-end;z-index: 5;">收起回复</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</z-paging>
			
			
		</view>
		<view :class="{keyboardheight:height}" :style="{bottom:height}" style="width: 100%;">
			<view class="inputBox">
				<u-avatar size="52rpx" :src="userInfo.avatar"></u-avatar>
				<input @keyboardheightchange='keyboardheightchange' :placeholder="placeholder"
					:adjust-position='false' v-model="value" />
				<text style="font-size: 26rpx;color: #101010;" @click="sumbit">发送</text>
			</view>
		</view>
	</view>
</template>

<script>
	import album from '@/components/album.vue';
	export default {
		components: {
			album,
		},
		data() {
			return {
				users: {},
				develop: [],
				value: "",
				reply_id: 0,
				parent_id: 0,
				placeholder: '写评论...',
				user_id: null,
				height: 0,
				userInfo: uni.getStorageSync('user'),
				data: [],
				run_id: null,
				detail: {
					videos: [],
					images: []
				},
				user: [],
				loading: true,
				commentLoading: true,
				isThumbsuped: false
			}
		},
		onLoad(op) {
			this.run_id = op.id
			this.$api.Run.Detail(this.run_id).then(res => {
				this.isThumbsuped = res.data.isThumbsuped
				this.detail = res.data.run
				this.user = this.detail.thumbsups.map(item => item.user)
				this.loading = false
			})
		},
		methods: {
			Thumbsup() {
				if (this.isThumbsuped) {
					uni.$u.toast('取消点赞')
					this.detail.thumbsup_count--
					this.user = this.user.filter(item => item.id != this.userInfo.id)
				} else {
					uni.$u.toast('点赞成功')
					this.detail.thumbsup_count++
					this.user.push(this.userInfo)
				}
				this.isThumbsuped = !this.isThumbsuped
				this.$api.Thumbsup.Thumbsup('run', this.detail.id)

			},
			keyboardheightchange(e) {
				console.log(e.detail)
				const {
					height
				} = e.detail
				if (height) {
			
					this.height = height + 'px'
				} else {
			
					this.height = 0
				}
			},
			close(id) {
				this.develop.splice(this.develop.indexOf(id), this.develop.indexOf(id) + 1);
			},
			
			click(item) {
				console.log(item)
				if (item.parent_id) {
					this.reply_id = item.id
					this.parent_id = item.parent_id
					this.user_id = item.user_id
					this.placeholder = `给@${item.user.nick_name}留言...`
				} else {
					this.parent_id = item.id
					this.reply_id = 0
					this.placeholder = `给@${this.users[item.user_id].nick_name}留言...`
				}
			
			},
			query(pageNo, pageSize) {
				let sendData = {
					page: pageNo,
					size: pageSize
				};
				this.get(sendData);
			},
			async get(sendData) {
				uni.showLoading({
					title: "加载中..."
				})
				const res = await this.$api.Comment.List('run',this.run_id, sendData)
				uni.hideLoading()
				if (res) {
					
					this.$refs.paging.complete(res.data.comments.data.map(item => {
						return {
							...item,
							chidren: []
						}
					}));
					this.commentLoading=false
					this.users = {
						...this.users,
						...res.data.users
					}
				}
			
			},
			sumbit() {
			
				if (this.value.length < 6) {
					this.$refs.uToast.show({
						type: 'error',
						message: "不能小于6个字",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					})
					return
				}
				let obj = {
					content: this.value,
					parent_id: this.parent_id,
					reply_id: this.reply_id
				}
				this.reply_id = 0
				this.parent_id = 0
				this.placeholder = `写评论...`
				this.value = ''
				this.$api.Comment.Add('run',this.run_id, obj).then(res => {
					if (obj.parent_id == 0) {
						this.data.unshift({
							content: obj.content,
							parent_id: obj.parent_id,
							reply_id: obj.reply_id,
							user_id: this.userInfo.id,
							children_count: 0,
							chidren: [],
							id: res.data.comment_id
						})
						this.users[this.userInfo.id] = this.userInfo
						return
					}
					if (obj.parent_id != 0) {
						if (this.develop.includes(obj.parent_id)) {
							this.data.forEach(item => {
								if (item.id == obj.parent_id) {
									item.children_count++
									console.log(item.children_count)
									if (obj.reply_id != 0) {
										item.chidren.unshift({
											content: obj.content,
											parent_id: obj.parent_id,
											reply_id: obj.reply_id,
											user: this.userInfo,
											reply: {
												user: this.users[this.user_id],
											},
											id: res.data.comment_id,
											user_id: this.userInfo.id,
										})
										this.user_id = null
									} else {
										item.chidren.unshift({
											content: obj.content,
											parent_id: obj.parent_id,
											reply_id: obj.reply_id,
											user: this.userInfo,
											id: res.data.comment_id,
											user_id: this.userInfo.id,
										})
									}
								}
							})
						} else {
							this.getReply(obj.parent_id)
						}
					}
				})
			
			
			},
			async getReply(id) {
			
				const res = await this.$api.Comment.ListReply(this.run_id, {
					parent_id: id
				})
				if (res) {
			
					this.data.forEach(item => {
						console.log(item, id)
						if (item.id == id) {
							item.children_count++
							item.chidren = res.data
						}
					})
					console.log(this.data)
					this.develop.push(id)
				}
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inputBox {
		border: 1rpx solid #f5f5f5;
		padding-top: 12rpx;
		padding-bottom: 12rpx;
		padding-left: 18rpx;
		padding-right: 18rpx;
		font-size: 26rpx;
		color: #101010;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		>input {
			flex: 0.9;
			height: 48rpx;
		}
	}
	
	
	.Comments {
		text-align: left;
		box-sizing: border-box;
		padding-top: 10rpx;
		font-size: 26rpx;
		border-top: 1rpx solid #f5f5f5;
		margin-bottom: 20rpx;
	
		>view {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
	
			>view {
				display: flex;
			}
		}
	}
	
	.showhelp {
		position: relative;
		margin-top: 20rpx;
		text-align: center;
		box-sizing: border-box;
		height: 750rpx;
		padding: 0 0 20rpx;
	}
	
	.keyboardheight {
		position: fixed;
		z-index: 111111111111111;
		left: 0;
	}
	.page {
		box-sizing: border-box;
		padding: 0rpx 20rpx;
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.body {
		flex: 1;
		overflow: hidden;
	}
</style>